<template>
  <div class='goodsinfo-container'>
    <transition
    @before-enter='beforeEnter'
    @enter='enter'
    @after-enter='afterEnter'>
      <div class='ball'  v-show='ballflag' ref='ball'></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <Lunbotu :lunbotuList='lunbotuList' :isfull="false"></Lunbotu>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsinfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class='price'>
            市场价:<del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价:<span class='now_price'>￥{{goodsinfo.sell_price}}</span>
          </p>
          <P>购买数量:&nbsp;&nbsp;<numbox @getcount='getSelecctedCount' :max='goodsinfo.stock_quantity'></numbox></P>
          <p>
            <mt-button type='primary' size='small'>立即购买</mt-button>
            <mt-button type='danger' size='small' @click='addToShopCar'>加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号:{{ goodsinfo.goods_no }}</p>
          <p>商品库存:{{ goodsinfo.stock_quantity }}</p>
          <p>上架时间:{{ goodsinfo.add_time | dataFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type='primary' size='large' plain @click='goDesc(id)'>图文介绍</mt-button>
        <mt-button type='danger' size='large' plain @click='goComment(id)'>商品评论</mt-button>
      </div>
    </div>
  </div>
  
</template>

<script>
import Lunbotu from '../subcomponents/Lunbotu.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
  data(){
    return {
      lunbotuList:[],
      id:this.$route.params.id,
      goodsinfo:{},
      ballflag: false,
      selectedCount:1
    }
  },
  created(){
    this.getLunbotu(),
    this.getGoodsinfo()
  },
  methods:{
    getLunbotu(){
      this.$http.get('getthumimages/' + this.id).then(result => {
        if(result.body.status === 0){
          result.body.message.forEach(item => {
            item.img = item.src;
          });
        }
        this.lunbotuList = result.body.message
      })
    },
    getGoodsinfo(){
      this.$http.get('goods/getinfo/' + this.id).then(result =>{
        if(result.body.status === 0){
          this.goodsinfo = result.body.message[0]
        }
      })
    },
    goDesc(id){
      // 点击使用编程式导航 跳转到图文介绍页面
      this.$router.push({ name:'goodsdesc', params:{ id } })
    },
    goComment(id){
      this.$router.push({ name:'goodscomment', params:{ id } })
    },
    addToShopCar(){
      this.ballflag = !this.ballflag
      var goodsinfo ={
        id:this.id,
        count:this.selectedCount,
        price:this.goodsinfo.sell_price,
        select:true
      }
      this.$store.commit('addToCar',goodsinfo)
      // console.log(this.store.state.car);
    },
    beforeEnter(el){
      el.style.transform = 'translate(0,0)'
    },
    enter(el,done){
      el.offsetWidth;

      const x = document.getElementById('badge').getBoundingClientRect().left - this.$refs.ball.getBoundingClientRect().left
      const y = document.getElementById('badge').getBoundingClientRect().top - this.$refs.ball.getBoundingClientRect().top
      el.style.transform = `translate(${x}px,${y}px)`
      el.style.transition = 'all 0.5s cubic-bezier(.51,-0.28,1,.73)'
      done()
    },
    afterEnter(el){
      this.ballflag = !this.ballflag
    },
    getSelecctedCount(count){
      this.selectedCount = count;
    }
  },
  components:{
    Lunbotu,
    numbox
  }
}
</script>

<style lang="scss" scoped>
.goodsinfo-container{
  background:#eee;
  overflow: hidden;
  .now_price{
    font-size:16px;
    color:red;
    font-weight: bold;
  }
  .mui-card-footer{
    display: block;
    button{
      margin: 15px 0;
    }
  }
  .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 147px;
  }
}
</style>
